<template>
  <div class="login-container">
    <el-form autoComplete="off" :model="loginForm" :rules="loginRules" ref="loginForm" label-position="left"
             label-width="0px"
             class="card-box login-form">
      <h3 class="title">登录</h3>
      <el-form-item prop="username">
        <!--<span class="svg-container svg-container_login">-->
          <!--<svg-icon icon-class="user"/>-->
        <!--</span>-->
        <el-input name="username" type="text" v-model="loginForm.username" autoComplete="off"
                  placeholder="用户名"/>
      </el-form-item>
      <el-form-item prop="password">
        <!--<span class="svg-container">-->
          <!--<svg-icon icon-class="password"></svg-icon>-->
        <!--</span>-->
        <el-input name="password" :type="pwdType" v-model="loginForm.password"
                  autoComplete="off"
                  placeholder="密码"></el-input>
        <!--<span class="show-pwd" @click="showPwd">-->
          <!--<svg-icon icon-class="eye"/>-->
        <!--</span>-->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width:100%;" :loading="loading" @click="handleLogin('loginForm')">
          登录
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import {baseUrl} from "../api/api";
  import {login} from "../api/userMG";

  export default {
    username: 'login',
    data() {
      /*const validateUsername = (rule, value, callback) => {
        if (value.trim().length<1) {
          callback(new Error('用户名不能为空'))
        } else {
          callback()
        }
      };
      const validatePass = (rule, value, callback) => {
        if (value.trim().length < 1) {
          callback(new Error('密码不能为空'))
        } else {
          callback()
        }
      };*/
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loginRules: {
          username: [{required: true, trigger: 'blur', message: '请输入用户名'/*validator: validateUsername*/}],
          password: [{required: true, trigger: 'blur', message: '请输入密码'/*validator: validatePass*/}]
        },
        loading: false,
        pwdType: 'password'
      }
    },
    methods: {
      showPwd() {
        if (this.pwdType === 'password') {
          this.pwdType = ''
        } else {
          this.pwdType = 'password'
        }
      },
      handleLogin(formName) {
        // this.$refs.loginForm.validate(valid => {
        this.$refs[formName].validate(valid => {
          if (valid) {
            this.loading = true;
            /*this.$store.dispatch('Login', this.loginForm).then(() => {
              this.loading = false;
              this.$router.push({path: '/'});
            }).catch((e) => {
              this.loading = false
            })*/
            console.log("form:" + JSON.stringify(this.loginForm));

            login(this.loginForm)
              .then(res=>{
              console.log("login res:" + JSON.stringify(res));
                setTimeout(() => {
                  this.logining = false
                  this.$store.commit('SET_TOKEN', res.data.token);
                  // 缓存token
                  localStorage.setItem('token', res.data.token)
                  // 缓存用户个人信息
                  localStorage.setItem('userdata', JSON.stringify(res.data))
                  // this.$store.commit('login', 'true')
                  let redirect = decodeURIComponent(this.$route.query.redirect || '/home');
                  this.$router.push({ path: redirect })// 获取登录成功后要跳转的路由
                  // this.$router.push({ path: '/home' })
                }, 1000)
            })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
